<template>
    <el-dialog
        class="custom-modal"
        :title="title"
        :visible.sync="show"
        append-to-body
        top="20vh"
        @open="_open"
        @close="_close"
        @closed="_afterClose"
        v-auto-focus
        :close-on-click-modal="false"
    >
        <div class="option-value-box">
            <validation-observer ref="observerRef">
                <el-form
                    class="custom-form"
                    label-position="right"
                    label-width="120"
                    ref="formRef"
                >
                    <validation-provider
                        name="model.name"
                        vid="model.name"
                        :rules="{ required: true }"
                        :customMessages="{ required: onlyName ? '请输入科室名称' : '请输入部门名称' }"
                        v-slot="{ errors }"
                        slim
                    >
                        <el-form-item :label="onlyName ? '科室名称' : '部门名称'" required>
                            <div
                                class="cf__group"
                                :class="{ error: errors.length > 0 }"
                            >
                                <div class="cf__group-info">
                                    <el-input
                                        v-model="model.name"
                                        name="model.name"
                                        :placeholder="onlyName ? '请输入科室名称' : '请输入部门名称'"
                                        maxlength="15"
                                        auto-complete="off"
                                    >
                                    </el-input>
                                </div>
                                <div class="cf__group-tips">
                                    <template v-if="errors.length > 0">
                                        {{ errors[0] }}
                                    </template>
                                </div>
                            </div>
                        </el-form-item>
                    </validation-provider>
                    <template v-if="!onlyName">
                        <validation-provider
                            name="model.phone"
                            vid="model.phone"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item label="联系方式">
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <el-input
                                            v-model="model.phone"
                                            name="model.phone"
                                            placeholder="请输入联系方式"
                                            maxlength="11"
                                            auto-complete="off"
                                        >
                                        </el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <validation-provider
                            name="model.desc"
                            vid="model.desc"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item label="部门介绍">
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <el-input
                                            v-model="model.desc"
                                            name="model.desc"
                                            placeholder="请输入部门介绍"
                                            maxlength="250"
                                            auto-complete="off"
                                            type="textarea"
                                            show-word-limit
                                            rows="4"
                                        >
                                        </el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                    </template>
                </el-form>
            </validation-observer>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button
                class="sure"
                type="primary"
                @click="sure"
                :loading="ajaxLoader"
                >保存</el-button
            >
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DragOptionForm extends Vue {
    title = "部门信息";
    show = false;
    ajaxLoader = false;
    ajaxIndex = 0;

    model = {
        name: "",
        phone: "",
        desc: "",
        id: ""
    };

    // 只输入名称
    onlyName = false

    async _open() {
        this.$emit("onopen");
        this.title = this.onlyName ? '科室信息' : '部门信息';
    }

    _close() {
        this.$emit("onclose");
    }

    _afterClose() {
        this.$nextTick(function() {
            this.$emit("onafterclose");
            this.$el.remove && this.$el.remove();
        });
    }

    loader(state: boolean) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    close() {
        this.show = false;
        this.$emit("close");
    }

    async sure() {
        const observerRef: any = this.$refs.observerRef;
        const validateResult: any = await observerRef.validate();
        if (validateResult) {
            this.$emit("sure", this.model);
            return;
        }
        this.$message({
            duration: 3000,
            message: "请确保表单数据有效！",
            type: "error"
        });
    }
}
</script>
<style scoped lang="scss">
.custom-modal {
    margin: 0;
    & /deep/ {
        .el-dialog {
            width: 4.5rem;
        }
        .custom-form .cf__group .el-textarea.el-input--medium,
        .custom-form .cf__group .el-date-editor.el-input,
        .custom-form .cf__group .el-textarea.el-input--medium .el-textarea__inner,
        .custom-form .cf__group .el-input--medium .el-input__inner{
            width: 100%;
        }
    }
}
</style>
